<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="发起拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '发起拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<view class="items">
							<view class="item" @click="handleDetails(item)" v-for="item in dataList" :style="{
								backgroundImage:`url(${getImgUrl('/mine/cardCombination/img5.png')})`
								,
							  }">
								<view class="left">
									<view class="top">
										<view class="num">
											<text>卡台号</text>
										</view>
										<view class="name">
											<text>{{item.counterNo}}</text>
											
											<view class="status">
												{{item.counterStatus == 8 ? '拼卡中' : '未发起'}}
											</view>
										</view>
									</view>
									<view class="bottom">
										<view class="tips">
											<view class="tip">
												<text>男生门票</text>
												<text>¥{{item.boyTicketNum}}</text>
											</view>
											<view class="tip">
												<text>女生门票</text>
												<text>¥{{item.girlTicketNum}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="tit">
										<text>最低售卖</text>
									</view>
									<view class="text">
										<text>{{item.minNum}}张</text>
									</view>
								</view>
							</view>
						
						</view>
					</view>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getWXStatusHeight
	} from "@/utils";
	import {
		getOrdershareCounter
	} from "@/api/api";

	export default {
		components: {
			VideoBox
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			this.getDataList()
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
			};
		},
		methods: {
			getImgUrl,
			handleDetails(item) {
				if(item.counterStatus == 8){
					return uni.$u.toast('当前卡台已发起拼卡')
				}
				this.getnav('/pages/mine/cardCombination/initiatedForm?id=' + item.id)
			},
			async getDataList() {
				const res = await getOrdershareCounter()
				if (res.code == 200) {
					this.dataList = res.rows
					console.log(this.dataList, "this.dataList");
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		.item {
			padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.status{
				width: 100rpx;
				height: 40rpx;
				background: rgba(255, 96, 72, 0.5);
				border-radius: 14rpx;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #FF6048;
				margin-top: 5rpx;
				margin-left: 20rpx;
			}
			.name{
				display: flex;
			}
			.left {
				.top {
					display: flex;

					.name {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}

					.num {
						width: 100rpx;
						height: 40rpx;
						background: #0FC6C2;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						margin-bottom: 24rpx;

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 24rpx;
						}
					}
				}

				.bottom {
					.tips {
						display: flex;
					}

					.tip {
						margin-right: 20rpx;
						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 28rpx;
								color: #86909C;
								margin-right: 20rpx;
							}

							&:nth-child(2) {
								font-weight: 500;
								font-size: 28rpx;
								color: #60c2bf;
							}
						}
					}
				}
			}

			.right {
				.tit {
					font-weight: 500;
					font-size: 28rpx;
					color: #86909C;
				}

				.text {
					color: #fff;
					font-size: 28rpx;
				}

			}
		}
	
	}

	.content {
		padding: 32rpx;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>